<template>
	<view class="modal-container">
		<!-- 遮罩层 -->
		<view class="dialog"></view>
		<view class="toast">
			<view class="close-icon" @click="closeToast">X</view>
			<view class="toast-top">
				<view class="desc">评价描述</view>
				<view class="example-body">
					<uni-rate v-model="rateValue" @change="onChange" />
				</view>
				<view v-if="rateValue == 1" class="desc-text">非常不满意</view>
				<view v-else-if="rateValue == 2" class="desc-text">不满意</view>
				<view v-else-if="rateValue == 3" class="desc-text">一般</view>
				<view v-else-if="rateValue == 4" class="desc-text"> 满意</view>
				<view v-else class="desc-text">非常满意</view>
			</view>
			<textarea class="evaluate-content" v-model="content" placeholder="张师傅服务态度很好，还告知一些注意事项，感谢！"></textarea>
			<button class="evaluate-btn" @click="handleSubmit">发布</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rateValue: 5,
				content: ''
			};
		},
		methods: {
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				console.log(this.rateValue)
			},
			closeToast() {
				this.$emit('close')
			},
			handleSubmit() {
				this.$emit('submit',{rateValue: this.rateValue,content: this.content})
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss">
	.modal-container {
		.dialog {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			right: 0;
			background: #282828;
			opacity: 0.53;
		}
		.toast {
			position: fixed;
			padding-left: 39rpx;
			padding-top: 57rpx;
			top: 262rpx;
			left: 50%;
			transform: translate(-50%);
			width: 640rpx;
			height: 458rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			.close-icon {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #fff;
				position: absolute;
				right: 15rpx;
				top: 10rpx;
				background: #E8E8E8;
			}
			.toast-top {
				display: flex;
				align-items: center;
				.desc {
					margin-right: 20rpx;
				}
				.desc-text {
					color: #BCBCBC;
					font-size: 30rpx;
					margin-left: 18rpx;
				}
			}
			.evaluate-content {
				padding: 10rpx;
				margin-top: 39rpx;
				margin-bottom: 38rpx;
				width: 540rpx;
				height: 192rpx;
				font-size: 28rpx;
				border: 2rpx solid #D2D2D2;
			}
			.evaluate-btn {
				margin-left: 207rpx;
				width: 148rpx;
				height: 56rpx;
				line-height: 56rpx;
				background: #16B20E;
				border-radius: 4rpx;
				color: #fff;
				font-size: 26rpx;
				text-align: center;
			}
		}
	}
</style>
